<template>
  <div>
    <div class="box">
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
    </div>
    <!-- 主体内容 -->
    <main class="main">
        <!-- 主体左侧 -->
        <section class="section">
            <div class="secTop">
                <img src="../../assets/Snipaste_2022-04-04_11-30-58.png" alt="">
                <h2>热门推荐</h2>
                <a href="#">华语</a>
                <a href="#">流行</a>
                <a href="#">摇滚</a>
                <a href="#">民谣</a>
                <a href="#">电子</a>
                <span>更多<img src="../../assets/小箭头.png" alt=""></span>
            </div>
            <div class="hot cf">
                <ul class="hotmenu">
                    <li>
                        <img src="../../assets/11.jpg" alt="">
                        <p>
                            <img src="../../assets/耳机.png" alt="">
                            <span>43321</span>
                            <img src="../../assets/播放.png" alt="">
                        </p>
                        <a href="#">经典语录，多少沾点社会</a>
                    </li>
                    <li>
                        <img src="../../assets/12.jpg" alt="">
                        <p>
                            <img src="../../assets/耳机.png" alt="">
                            <span>33万</span>
                            <img src="../../assets/播放.png" alt="">
                        </p>
                        <a href="#">Dreamcores 梦核（动物园规则怪谈氛围</a>
                    </li>
                    <li>
                        <img src="../../assets/13.jpg" alt="">
                        <p>
                            <img src="../../assets/耳机.png" alt="">
                            <span>66万</span>
                            <img src="../../assets/播放.png" alt="">
                        </p>
                        <a href="#">开头就爱上超火歌曲（必听）</a>
                    </li>
                    <li>
                        <img src="../../assets/14.jpg" alt="">
                        <p>
                            <img src="../../assets/耳机.png" alt="">
                            <span>100万</span>
                            <img src="../../assets/播放.png" alt="">
                        </p>
                        <a href="#"> 莫非留声机-《La solitudiue》</a>
                    </li>
                    <li>
                        <img src="../../assets/15.jpg" alt="">
                        <p>
                            <img src="../../assets/耳机.png" alt="">
                            <span>12万</span>
                            <img src="../../assets/播放.png" alt="">
                        </p>
                        <a href="#">颓废 不想学习时听的歌【逆袭专用】</a>
                    </li>
                    <li>
                        <img src="../../assets/16.jpg" alt="">
                        <p>
                            <img src="../../assets/耳机.png" alt="">
                            <span>9万</span>
                            <img src="../../assets/播放.png" alt="">
                        </p>
                        <a href="#"> 果味VC来电:宇宙若是一场幻觉</a>
                    </li>
                    <li>
                        <img src="../../assets/17.jpg" alt="">
                        <p>
                            <img src="../../assets/耳机.png" alt="">
                            <span>73万</span>
                            <img src="../../assets/播放.png" alt="">
                        </p>
                        <a href="#">好好生活 因为总有一个人惦记你</a>
                    </li>
                    <li>
                        <img src="../../assets/18.jpg" alt="">
                        <p>
                            <img src="../../assets/耳机.png" alt="">
                            <span>32万</span>
                            <img src="../../assets/播放.png" alt="">
                        </p>
                        <a href="#"> 唯一 （耳机更佳）</a>
                    </li>
                </ul>
            </div>
            <div class="secTop">
                <img src="../../assets/Snipaste_2022-04-04_11-30-58.png" alt="">
                <h2>个性化推荐</h2>
            </div>
            <div class="personality cf">
                <ul>
                    <li>
                        <img src="../../assets/21.png" alt="">
                        <a href="#">每日歌曲推荐，根据你的口味生成，每天6:00更新</a>
                    </li>
                    <li>
                        <img src="../../assets/22.png" alt="">
                        <a href="#">私人雷达 | 根据听歌记录为你打造</a>
                    </li>
                    <li>
                        <img src="../../assets/23.png" alt="">
                        <a href="#">粤语传世经典，怀旧是人的本能</a>
                    </li>
                    <li>
                        <img src="../../assets/24.png" alt="">
                        <a href="#">开车专听音乐（个人喜好偶更）ʕ̯•͡˔•̯᷅ʔ</a>
                    </li>
                </ul>
            </div>
            <div class="secTop">
                <img src="../../assets/Snipaste_2022-04-04_11-30-58.png" alt="">
                <h2>新碟上架</h2>
                <span>更多<img src="../../assets/小箭头.png" alt=""></span>
            </div>
            <div class="newDisc">
                <ul class="menu">
                    <li>
                        <img src="../../assets/31.jpg" alt="">
                        <img src="../../assets/dp.png" alt="" class="dp">
                        <a href="#">Afterglow<br>She Her Her Hers</a>
                    </li>
                    <li>
                        <img src="../../assets/32.jpg" alt="">
                        <img src="../../assets/dp.png" alt="" class="dp">
                        <a href="#">一个人的冒险<br>Yamy郭颖</a>
                    </li>
                    <li>
                        <img src="../../assets/33.jpg" alt="">
                        <img src="../../assets/dp.png" alt="" class="dp">
                        <a href="#">DIGI¹<br>郭顶</a>
                    </li>
                    <li>
                        <img src="../../assets/34.jpg" alt="">
                        <img src="../../assets/dp.png" alt="" class="dp">
                        <a href="#">I NEVER DIE<br>(G)I-DLE</a>
                    </li>
                    <li>
                        <img src="../../assets/35.jpg" alt="">
                        <img src="../../assets/dp.png" alt="" class="dp">
                        <a href="#">SNTS<br>马思唯</a>
                    </li>
                </ul>
                <ul class="menu1">
                    <li>
                        <img src="../../assets/36.jpg" alt="">
                        <img src="../../assets/dp.png" alt="" class="dp">
                        <a href="#">As It Was<br>Harry Styles</a>
                    </li>
                    <li>
                        <img src="../../assets/37.jpg" alt="">
                        <img src="../../assets/dp.png" alt="" class="dp">
                        <a href="#">WhenYou'reGone<br>Shawn Mendes</a>
                    </li>
                    <li>
                        <img src="../../assets/38.jpg" alt="">
                        <img src="../../assets/dp.png" alt="" class="dp">
                        <a href="#">十万小时.EP01<br>保质期艺术家</a>
                    </li>
                    <li>
                        <img src="../../assets/39.jpg" alt="">
                        <img src="../../assets/dp.png" alt="" class="dp">
                        <a href="#">up at night<br>Kehlani</a>
                    </li>
                    <li>
                        <img src="../../assets/40.jpg" alt="">
                        <img src="../../assets/dp.png" alt="" class="dp">
                        <a href="#">华北浪革<br>刘森</a>
                    </li>
                </ul>
                <div class="left"></div>
                <div class="right"></div>
            </div>
            <div class="secTop">
                <img src="../../assets/Snipaste_2022-04-04_11-30-58.png" alt="">
                <h2>榜单</h2>
                <span>更多<img src="../../assets/小箭头.png" alt=""></span>
            </div>
            <!-- 榜单 -->
            <div class="list">
                <div class="onelist">
                    <img src="../../assets//41.jpg" alt="">
                    <h3>飙升榜</h3>
                    <span></span>
                    <span></span>
                    <ul class="listmenu">
                        <li>
                            <span  class="one">1</span>
                            <span>Lydia</span>
                            <span></span>
                        </li>
                        <li>
                            <span  class="one">2</span>
                            <span>苦茶子</span>
                            <span></span>
                        </li>
                        <li>
                            <span  class="one">3</span>
                            <span>Shadow of the Sun</span>
                            <span></span>
                        </li>
                        <li>
                            <span>4</span>
                            <span>Intentionally</span>
                            <span></span>
                        </li>
                        <li>
                            <span>5</span>
                            <span>Bet On Me</span>
                            <span></span>
                        </li>
                        <li>
                            <span>6</span>
                            <span>最美的瞬间</span>
                            <span></span>
                        </li>
                        <li>
                            <span>7</span>
                            <span>笑红尘</span>
                            <span></span>
                        </li>
                        <li>
                            <span>8</span>
                            <span>水星记</span>
                            <span></span>
                        </li>
                        <li>
                            <span>9</span>
                            <span>Take Me To Church</span>
                            <span></span>
                        </li>
                        <li>
                            <span>10</span>
                            <span>莫折柳</span>
                            <span></span>
                        </li>
                        <li>
                            <span>查看全部></span>
                        </li>
                    </ul>
                </div>
                <div class="onelist">
                    <img src="../../assets//42.jpg" alt="">
                    <h3>新歌榜</h3>
                    <span></span>
                    <span></span>
                    <ul class="listmenu">
                        <li>
                            <span  class="one">1</span>
                            <span>爱丫爱丫</span>
                            <span></span>
                        </li>
                        <li>
                            <span  class="one">2</span>
                            <span>Bet On Me</span>
                            <span></span>
                        </li>
                        <li>
                            <span  class="one">3</span>
                            <span>笑红尘</span>
                            <span></span>
                        </li>
                        <li>
                            <span>4</span>
                            <span>匿名的好友</span>
                            <span></span>
                        </li>
                        <li>
                            <span>5</span>
                            <span>再等冬天(Memories)</span>
                            <span></span>
                        </li>
                        <li>
                            <span>6</span>
                            <span>滚烫</span>
                            <span></span>
                        </li>
                        <li>
                            <span>7</span>
                            <span>今晚约会吧</span>
                            <span></span>
                        </li>
                        <li>
                            <span>8</span>
                            <span>晚风心里吹</span>
                            <span></span>
                        </li>
                        <li>
                            <span>9</span>
                            <span>TOMBOY</span>
                            <span></span>
                        </li>
                        <li>
                            <span>10</span>
                            <span>年少有为</span>
                            <span></span>
                        </li>
                        <li>
                            <span>查看全部></span>
                        </li>
                    </ul>
                </div>
                <div class="onelist">
                    <img src="../../assets//43.jpg" alt="">
                    <h3>原创榜</h3>
                    <span></span>
                    <span></span>
                    <ul class="listmenu">
                        <li>
                            <span  class="one">1</span>
                            <span>PLAN B</span>
                            <span></span>
                        </li>
                        <li>
                            <span  class="one">2</span>
                            <span>AF1(prod.RTYRACE)</span>
                            <span></span>
                        </li>
                        <li>
                            <span  class="one">3</span>
                            <span>MU5735</span>
                            <span></span>
                        </li>
                        <li>
                            <span>4</span>
                            <span>虹匿</span>
                            <span></span>
                        </li>
                        <li>
                            <span>5</span>
                            <span>Lonestar</span>
                            <span></span>
                        </li>
                        <li>
                            <span>6</span>
                            <span>假笑的艺术</span>
                            <span></span>
                        </li>
                        <li>
                            <span>7</span>
                            <span>少年之路</span>
                            <span></span>
                        </li>
                        <li>
                            <span>8</span>
                            <span>雨中芭蕾</span>
                            <span></span>
                        </li>
                        <li>
                            <span>9</span>
                            <span>我们会变成一颗星星</span>
                            <span></span>
                        </li>
                        <li>
                            <span>10</span>
                            <span>理想</span>
                            <span></span>
                        </li>
                        <li>
                            <span>查看全部></span>
                        </li>
                    </ul>
                </div>
            </div>
        </section>
        <!-- 右侧侧边栏 -->
        <aside class="aside">
            <div class="msg">
                <img src="../../assets//c1.jpg" alt="">
                <span>就当我为遇见你伏笔</span>
                <button class="lv">LV.8</button>
                <button class="sign">签到</button>
                <a href="#">8<br>动态</a>
                <a href="#">40<br>关注</a>
                <a href="#">30<br>粉丝</a>
            </div>
            <div class="singer">
                <p>入驻歌手<a href="#">查看更多>></a></p>
                <ul>
                    <li>
                        <a href="#"><img src="../../assets//c2.jpg" alt=""></a>
                        <p>张惠妹aMEI</p>
                        <p>台湾歌手张惠妹</p>
                    </li>
                    <li>
                        <a href="#"><img src="../../assets//c3.jpg" alt=""></a>
                        <p>Fine乐团</p>
                        <p>独立音乐人</p>
                    </li>
                    <li>
                        <a href="#"><img src="../../assets/c4.jpg" alt=""></a>
                        <p>万晓利</p>
                        <p>民谣歌手</p>
                    </li>
                    <li>
                        <a href="#"><img src="../../assets/c5.jpg" alt=""></a>
                        <p>音乐人赵雷</p>
                        <p>民谣歌手</p>
                    </li>
                    <li>
                        <a href="#"><img src="../../assets/c6.jpg" alt=""></a>
                        <p>王三溥</p>
                        <p>音乐人</p>
                    </li>
                </ul>
                <button>申请成为网易音乐人</button>
            </div>
            <div class="host">
                <p>热门主播</p>
                <ul>
                    <li>
                        <a href="#"><img src="../../assets/c11.jpg" alt=""></a>
                        <span><a href="#">陈立</a><br>心里学家、美食家</span>
                    </li>
                    <li>
                        <a href="#"><img src="../../assets//c12.jpg" alt=""></a>
                        <span><a href="#">刘维-Julius</a><br>歌手、播客节目</span>
                    </li>
                    <li>
                        <a href="#"><img src="../../assets//c13.jpg" alt=""></a>
                        <span><a href="#">莫非定律MordeFeel</a><br>心里学家、美食家</span>
                    </li>
                    <li>
                        <a href="#"><img src="../../assets/c14.jpg" alt=""></a>
                        <span><a href="#">碎嘴许美达</a><br>脱口秀网络红人</span>
                    </li>
                    <li>
                        <a href="#"><img src="../../assets/c15.jpg" alt=""></a>
                        <span><a href="#">银临Rachel</a><br>古风音乐人</span>
                    </li>
                </ul>
            </div>
        </aside>
    </main>
    <!-- 网站底部 -->
    <footer class="footer">
        <div class="container">
            <p>
                服务条款| 隐私政策| 儿童隐私政策| 版权投诉指引| 联系我们 | 广告合作 | 廉正举报<br>
                网易公司版权所有©1997-2022杭州乐读科技有限公司运营：浙网文[2021] 1186-054号<br>
                粤B2-20090191-18  工业和信息化部备案管理系统网站  浙公网安备 33010902002564号<br>
            </p>
            <span class="one"><span class="foot1">独立音乐人</span></span>
            <span class="two"><span class="foot2">更多选项</span></span>
            <span class="three"><span class="foot3">嗨歌</span></span>
            <span class="four"><span class="foot4">赞赏</span></span>
            <span class="five"><span class="foot5">视频奖励</span></span>
            <span class="six"><span class="foot6">用户认证</span></span>
        </div>
    </footer>
  </div>
</template>

<script>
import Swiper from "swiper";
export default {
  // mounted===vue dom 节点创建完成
  mounted() {
    var mySwiper = new Swiper(".swiper", {
      autoplay: true,
      loop: true, // 循环模式选项
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
  },
};
</script>

<style lang="less">
.box{
    height: 300px;
}
.swiper {
  width: 1200px;
  margin: 0 auto;
  height: 300px;
  background: skyblue;
}
/* 主体 */
.main{
    background-color: #fff;
    width: 1200px;
    height: 1850px;
    margin: 0 auto;
}
.section{
    width: 900px;
    height: 1850px;
    border: 1px solid #eee;
    display: inline-block;
    box-sizing: border-box;
}
.section .secTop{
    height: 50px;
    border-bottom: 2px solid #f00;
    box-sizing: border-box;
}
.secTop h2{
    display: inline-block;
    font-weight: normal;
    margin-top:8px;
}
.secTop img{
    position: relative;
    top: 5px;
}
.secTop a{
    display: inline-block;
    width: 80px;
    height: 20px;
    border-right: 1px solid #999;
    text-align: center;
}
.secTop a:hover{
    color: rgb(194, 12, 12);
}
.secTop span{
    float: right;
    margin-top: 20px;
}
.secTop span:hover{
    cursor: pointer;
}
.secTop span img{
    width: 20px;
    height: 10px;
    position: relative;
    top: 0;
    margin: 0 5px;
}
/* 热门推荐 */
.hot{
    height: 440px;
    width: 898px;
}
.hotmenu li{
    width: 140px;
    height: 180px;
    position: relative;
    float: left;
    margin: 20px 42px;
}
.hotmenu li:hover{
    cursor: pointer;
}
.hotmenu p{
    // display: inline-block;
    width: 140px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    bottom: 40px;
    color: #fff;
    font-size: 12px;
    line-height: 30px;
}
.hotmenu p img{
    width: 20px;
    height: 20px;
    cursor: pointer;
}
.hotmenu p img:first-child{
    float: left;
    margin:5px
}
.hotmenu p img:last-child{
    float: right;
    margin: 5px;
}
.hotmenu a{
    font-size: 14px;
}
.hotmenu a:hover{
    color: #f00;
    text-decoration: underline;
}
/* 个性化推荐 */
.personality{
    width: 898px;
    height: 220px;
}
.personality li{
    width: 140px;
    height: 180px;
    position: relative;
    float: left;
    margin: 20px 42px;
}
.personality li:hover{
    cursor: pointer;
}
.personality li img{
    width: 140px;
    height: 140px;
}
.personality li a{
    font-size: 12px;
}
.personality li a:hover{
    color: #f00;
    text-decoration: underline;
}
/* 新碟上架 */
.newDisc{
    width: 850px;
    height: 200px;
    background-color: rgb(245,245,245);
    margin: 20px auto;
    border: 1px solid #eee;
    position: relative;
}
.newDisc ul{
    margin: 0 23px;
    width: 800px;
    height: 200px;
}
.newDisc .menu{
    overflow: hidden;
    transition: all 0.5s;
}
.newDisc .menu1{
    position: absolute;
    top: 0;
    transition: all 0.5s;
    width: 0;
    overflow: hidden;
    /* display: none; */
}
.newDisc li{
    width: 100px;
    float: left;
    margin: 30px;
    position: relative;
}
.newDisc li:hover{
    cursor: pointer;
}
.newDisc li a{
    font-size: 12px;
}
.newDisc a:hover{
    color: #f00;
    text-decoration: underline;
}
.newDisc .dp{
    width: 20px;
    height: 100px;
    position:absolute;
    right: -20px;
    top: 0;
}
.newDisc>div{
    width: 20px;
    height: 30px;
    display: inline-block;
    background-image: url(../../assets/箭头.png);
}
.newDisc>div:hover{
    cursor: pointer;
}
.newDisc .left{
    position: absolute;
    top: 72px;
    left: 10px;
    background-position: -8px -5px;
}
.newDisc .left:hover{
    background-position: -40px -5px;
}
.newDisc .right{
    position: absolute;
    top: 72px;
    right: 10px;
    background-position: -71px -5px;
}
.newDisc .right:hover{
    background-position: -102px -5px;
}
/* 榜单 */
.list{
    width: 898px;
    padding: 29px;
    box-sizing: border-box;
}
.list .onelist{
    width: 280px;
    height: 680px;
    border: 1px solid #aaa;
    padding-top: 20px;
    box-sizing: border-box;
    background-color: rgb(230, 230, 230);
    position: relative;
    float: left;
}
.list .onelist>img{
    float: left;
    margin-right: 10px;
    margin-left: 20px;
}
.list h3{
    display: inline-block;
}
.onelist span:hover{
    cursor: pointer;
}
.onelist>span{
    display: inline-block;
    position: absolute;
    top: 50px;
    right: 111px;
    width: 37px;
    height: 40px;
    background-image: url(../../assets/播放添加.png);
    background-position: -9px 0px;
}
.onelist>span:nth-child(4){
    right: 70px;
    background-position: -60px 0px;
}
.onelist>span:nth-child(3):hover{
    background-position: -9px -47px;
}
.onelist>span:nth-child(4):hover{
    background-position: -60px -47px;
}
.onelist .listmenu{
    width: 278px;
    height: 500px;
    position: absolute;
    top: 130px;
}
.listmenu li span:nth-child(3){
    display: inline-block;
    position: absolute;
    right: 0px;
    width: 100px;
    height: 30px;
    background-image: url(../../assets/播放添加.png);
    background-position: 0 -100px;
    margin-top: 10px;
    background-color: #fff;
    display: none;
}
.listmenu li:hover span{
    display: inline-block;
}
.listmenu li:nth-child(2n):hover{
    background-color: rgb(230, 230, 230);
}
.onelist li{
    height: 50px;
    line-height: 50px;
    padding-left: 20px;
    box-sizing: border-box;
}
.onelist li:hover{
    cursor: pointer;
}
.onelist li:hover span{
    color: rgb(194, 12, 12);
}
.onelist li:nth-child(2n){
    background-color: rgb(244,244,244);
} 
.onelist .one{
    color: rgb(194, 12, 12);
}
.onelist li:last-child span{
    float: right;
    margin-right: 30px;
}
/* 主体侧边栏 */
.aside{
    width: 300px;
    height: 1852px;
    float: right;
    border: 1px solid #eee;
    box-sizing: border-box;
}
.aside .msg{
    width: 300px;
    height: 200px;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
}
.msg>img{
    margin: 20px;
    border :1px solid #ccc;
    padding :2px;
    float: left;
    margin-bottom: 0;
}
.msg span{
    display: inline-block;
    margin-top: 20px;
}
.msg button{
    display: block;
    margin:10px 0;
    border-radius: 3px;
}
.msg .lv{
    border-radius: 10px;
    border: 1px solid rgb(187, 186, 186);
}
.msg button:nth-child(4){
    width: 120px;
    height: 30px;
    background-color: rgb(22, 172, 231);
    border: 1px solid #999;
}
.msg button:hover{
    cursor: pointer;
}
.msg a{
    margin-top: 30px;
    width: 99px;
    float: left;
    text-align: center;
    border-right: 1px solid #aaa;
    box-sizing: border-box;
}
.msg a:last-child{
    border-right: none;
    float: right;
}
.msg a:hover{
    color: rgb(22, 172, 231);
}
/* 入驻歌手 */
.singer{
    padding:20px;
    box-sizing: border-box;
}
.singer>p{
    border-bottom: 1px solid #999;
    margin-bottom: 20px;
}
.singer>p a{
    float: right;
}
.singer li{
    width: 260px;
    height: 62px;
    position: relative;
    border: 1px solid #999;
    margin: 10px 0;
}
.singer li image{
    float: left;
}
.singer li p{
    margin-bottom: 20px;
    margin-left: 80px;
    position: absolute;
    top: 5px;
}
.singer li p:nth-child(2){
    font-weight: bold;
}
.singer li p:last-child{
    top: 35px;
}
.singer li:hover{
    cursor: pointer;
    background-color: rgb(214, 211, 211);
}
.singer button{
    width: 260px;
    height: 40px;
    border: 1px solid rgb(131, 129, 129);
}
.singer button:hover{
    cursor: pointer;
    background-color: #fff;
    color: #f00;
}
/* 热门主播 */
.host{
    padding: 20px;
    box-sizing: border-box;
    font-size: 12px;
}
.host p{
    font-size: 18px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
}
.host li img{
    float: left;
    height: 40px;
    margin-right: 10px;
}
.host li{
    height: 40px;
    margin-bottom: 10px;
}
.host a:hover{
    text-decoration: underline;
}
/* 回到顶部 */
.goTop{
    width: 50px;
    height: 50px;
    background-color: rgb(245, 245, 245);
    border: 1px solid #999;
    position: fixed;
    top: 80%;
    left: 50%;
    margin-left: 620px;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
    padding-top: 20px;
    background-image: url(../../assets/收起箭头小\ \(3\).png);
    background-size: 30px 20px;
    background-repeat: no-repeat;
    background-position-x: 8px;
    display: none;
}
.goTop:hover{
    background-image: url(../../assets/收起箭头小\ \(1\).png);
}
.container{
    width: 1200px;
    margin: 0 auto;
}
body,ul,li,h1,h2,h3,h4,dl,dt,dd,p,table{
    margin: 0;
    padding: 0;
}
body{
    background-color: rgb(245,245,245);
}
a{
    text-decoration: none;
    color: #000;
}
.cf::after{
    content: "";
    clear: both;
    display: block;
}
image{
    vertical-align: bottom;
}
ul,li{
    list-style: none;
}

/* 网站底部 */
.footer{
    width: 100%;
    height: 210px;
    border: 1px solid #eee;
    font-size: 12px;
    box-sizing: border-box;
    position: relative;
}
.footer .container{
    position: relative;
    height: 110px;
}
.footer p{
    margin-top: 20px;
    line-height: 30px;
    display: inline-block;
}
.footer div>span{   
    display: inline-block;
    width: 50px;
    height: 44px;
    background-image: url(../../assets/底部精灵图.png);
    background-size: 100px 500px;
    background-position: 0px 0px;
    box-sizing: border-box;
    margin-top: -10px;
    margin-left: 60px;
    position: absolute;
    top: 40px;
    left: 540px;
}
.foot1{
    position: absolute;
    bottom: -16px;
    left: -9px;
    width: 60px;
}
.foot2{
    position: absolute;
    bottom: -16px;
    left: 3px;
    width: 60px;
}
.foot3{
    position: absolute;
    bottom: -16px;
    left: 9px;
    width: 60px;
}
.foot4{
    position: absolute;
    bottom: -16px;
    left: 17px;
    width: 60px;
}
.foot5{
    position: absolute;
    bottom: -16px;
    left: -5px;
    width: 60px;
}
.foot6{
    position: absolute;
    bottom: -16px;
    left: 4px;
    width: 60px;
}
.footer .two{
    left:635px;
    background-position: 50px 0px;
}
.footer .three{
    left:740px;
    background-position: 0px -45px;
}
.footer .four{
    left:832px;
    background-position: 50px -45px;
}
.footer .five{
    left:940px;
    background-position: 0px -90px;
}
.footer .six{
    left:1040px;
    background-position: 50px -90px;
}
.footer .one:hover{
    background-position: 0 -138px;
    cursor: pointer;
}
.footer .two:hover{
    background-position: 50px -138px;
    cursor: pointer;
}
.footer .three:hover{
    background-position: 0px -183px;
    cursor: pointer;
}
.footer .four:hover{
    background-position: 50px -183px;
    cursor: pointer;
}
.footer .five:hover{
    background-position: 0px -228px;
    cursor: pointer;
}
.footer .six:hover{
    background-position: 50px -228px;
    cursor: pointer;
}
</style>